<script setup lang="ts">
  import { ref } from 'vue'
  const isEnd = ref(false)

  function onEnded() {
    isEnd.value = true
  }
</script>

<template>
  <div class="home">
    <video
      src="https://linkfit-pro.oss-cn-hangzhou.aliyuncs.com/video/20240422.mp4"
      class="home-video"
      autoplay
      muted
      @ended="onEnded"
    ></video>
    <div class="title" v-if="isEnd">飞向蓝天</div>
    <div class="icon" v-if="isEnd"></div>
    <div class="content" v-if="isEnd">
      <RouterLink to="/yun20" class="item"></RouterLink>
      <RouterLink to="/hong6k" class="item"></RouterLink>
      <RouterLink to="/jian11b" class="item"></RouterLink>
      <RouterLink to="/jian8" class="item"></RouterLink>
      <RouterLink to="/jian20" class="item"></RouterLink>
      <RouterLink to="/chujiao6" class="item"></RouterLink>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .home {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    .home-video {
      width: 100vw;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .icon {
      position: absolute;
      background-image: url(https://p2.ssl.qhimg.com/t01cdb0f2818fcdaa7d.png);
      background-size: cover;
      width: 10.8vw;
      height: 10vw;
      top: 2vw;
      right: 2vw;
    }
    .title {
      width: 100%;
      position: absolute;
      left: 0;
      top: 8vw;
      font-size: 10vw;
      color: skyblue;
      -webkit-text-stroke: 2px #fff;
      text-align: center;
    }
    .content {
      height: 100vh;
      position: absolute;
      width: 100vw;
      top: 0;
      align-items: flex-end;
      display: flex;
      padding-left: 11vw;
      padding-bottom: 0.5vw;
      display: flex;

      .item {
        width: 11vw;
        height: 8vw;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.3s;
        border: 2px solid transparent;

        &:hover {
          border: 2px solid skyblue;
        }

        &:nth-child(2) {
          margin-left: 6vw;
          width: 12vw;
        }

        &:nth-child(3) {
          margin-left: 4.5vw;
          width: 10vw;
        }

        &:nth-child(4) {
          margin-left: 3vw;
          width: 11vw;
        }

        &:nth-child(5) {
          margin-left: 2vw;
          width: 11vw;
        }

        &:nth-child(6) {
          margin-left: 3vw;
          width: 12vw;
        }
      }
    }
  }
</style>
